<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>招商加盟 - 商机平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 10px 15px;
      background-color: white;
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #eee;
      font-size: 14px;
      background-color: #f5f5f5;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 筛选控制器 */
    .filter-controller {
      background-color: white;
      padding: 8px 15px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-btn {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;
      background: none;
      border: none;
      padding: 5px 10px;
    }
    
    .filter-btn i {
      margin-right: 5px;
    }
    
    .filter-btn.active {
      color: #2c6ecb;
    }
    
    /* 高级筛选面板 */
    .advanced-filter {
      background-color: white;
      border-top: 1px solid #eee;
      padding: 15px;
      display: none;
    }
    
    .filter-section {
      margin-bottom: 15px;
    }
    
    .filter-section-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #333;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-option {
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 13px;
      background-color: #f5f5f5;
      color: #666;
      border: 1px solid transparent;
    }
    
    .filter-option.active {
      background-color: #e8f4fd;
      color: #2c6ecb;
      border-color: #91bfff;
    }
    
    .filter-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 15px;
      padding-top: 10px;
      border-top: 1px dashed #eee;
    }
    
    .filter-action-btn {
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 14px;
    }
    
    /* 快速筛选栏 */
    .quick-filter {
      display: flex;
      overflow-x: auto;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      scrollbar-width: none;
    }
    
    .quick-filter::-webkit-scrollbar {
      display: none;
    }
    
    .quick-filter-item {
      white-space: nowrap;
      padding: 6px 14px;
      margin-right: 8px;
      border-radius: 20px;
      font-size: 14px;
      background-color: #f5f5f5;
      color: #666;
      border: none;
    }
    
    .quick-filter-item.active {
      background-color: #2c6ecb;
      color: white;
    }
    
    /* 视图切换 */
    .view-controls {
      display: flex;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      justify-content: flex-end;
    }
    
    .view-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid #eee;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      margin-left: 8px;
    }
    
    .view-btn.active {
      background-color: #2c6ecb;
      color: white;
      border-color: #2c6ecb;
    }
    
    /* 筛选结果统计 */
    .filter-result {
      padding: 8px 15px;
      background-color: white;
      font-size: 13px;
      color: #666;
      border-top: 1px solid #eee;
    }
    
    .result-count {
      color: #2c6ecb;
      font-weight: 500;
    }
    
    /* 招商加盟列表 */
    .franchise-list {
      padding: 10px;
    }
    
    .franchise-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 图片样式 */
    .franchise-images {
      display: flex;
      height: 160px;
    }
    
    .franchise-image {
      flex: 1;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .franchise-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }
    
    .franchise-image img:hover {
      transform: scale(1.05);
    }
    
    .image-count {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
    }
    
    /* 无图样式 */
    .no-image {
      height: 120px;
      background-color: #f0f7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2c6ecb;
      flex-direction: column;
    }
    
    .no-image i {
      font-size: 36px;
      margin-bottom: 8px;
    }
    
    .no-image-text {
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 内容区域 */
    .franchise-content {
      padding: 15px;
    }
    
    .franchise-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .franchise-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .franchise-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    
    .franchise-tag {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 12px;
    }
    
    .tag-food {
      background-color: #fff1f0;
      color: #ff4d4f;
    }
    
    .tag-retail {
      background-color: #f6ffed;
      color: #52c41a;
    }
    
    .tag-service {
      background-color: #fff7e6;
      color: #faad14;
    }
    
    .tag-tech {
      background-color: #e8f4fd;
      color: #1890ff;
    }
    
    .franchise-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 投资信息和操作区 */
    .franchise-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px dashed #eee;
    }
    
    .investment-info {
      color: #666;
      font-size: 14px;
    }
    
    .investment-amount {
      color: #2c6ecb;
      font-weight: 600;
    }
    
    .action-btn {
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 网格视图 */
    .franchise-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 10px;
      display: none;
    }
    
    .grid-item {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .grid-image {
      height: 120px;
      position: relative;
    }
    
    .grid-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .grid-no-image {
      height: 120px;
      background-color: #f0f7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2c6ecb;
    }
    
    .grid-no-image i {
      font-size: 24px;
    }
    
    .grid-content {
      padding: 10px;
    }
    
    .grid-title {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }
    
    .grid-investment {
      font-size: 13px;
      color: #2c6ecb;
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .grid-tag {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 10px;
      margin-right: 3px;
    }
    
    .grid-meta {
      font-size: 11px;
      color: #888;
      margin-top: 5px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
    }
    
    .load-more-btn {
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      background-color: white;
      border: 1px solid #eee;
      color: #666;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item.active {
      color: #2c6ecb;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">招商加盟</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-bell-o"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索招商项目、品牌、行业...">
    </div>
  </div>
  
  <!-- 筛选控制器 -->
  <div class="filter-controller">
    <button class="filter-btn active" id="industry-filter">
      <i class="fa fa-th-large"></i> 行业
    </button>
    <button class="filter-btn" id="investment-filter">
      <i class="fa fa-money"></i> 投资
    </button>
    <button class="filter-btn" id="region-filter">
      <i class="fa fa-map-marker"></i> 地区
    </button>
    <button class="filter-btn" id="sort-filter">
      <i class="fa fa-sort"></i> 排序
    </button>
  </div>
  
  <!-- 高级筛选面板 -->
  <div class="advanced-filter" id="filter-panel">
    <!-- 行业筛选 -->
    <div class="filter-section" id="industry-section">
      <div class="filter-section-title">加盟行业</div>
      <div class="filter-options">
        <div class="filter-option active">全部行业</div>
        <div class="filter-option">餐饮美食</div>
        <div class="filter-option">零售超市</div>
        <div class="filter-option">教育培训</div>
        <div class="filter-option">健康医疗</div>
        <div class="filter-option">科技创新</div>
        <div class="filter-option">酒店住宿</div>
        <div class="filter-option">休闲娱乐</div>
        <div class="filter-option">美容美发</div>
        <div class="filter-option">母婴用品</div>
        <div class="filter-option">汽车服务</div>
      </div>
    </div>
    
    <!-- 投资筛选 -->
    <div class="filter-section" id="investment-section" style="display: none;">
      <div class="filter-section-title">投资金额</div>
      <div class="filter-options">
        <div class="filter-option active">全部金额</div>
        <div class="filter-option">5万以下</div>
        <div class="filter-option">5-10万</div>
        <div class="filter-option">10-20万</div>
        <div class="filter-option">20-50万</div>
        <div class="filter-option">50-100万</div>
        <div class="filter-option">100万以上</div>
      </div>
      
      <div class="filter-section-title" style="margin-top: 15px;">加盟类型</div>
      <div class="filter-options">
        <div class="filter-option active">全部类型</div>
        <div class="filter-option">品牌加盟</div>
        <div class="filter-option">代理合作</div>
        <div class="filter-option">特许经营</div>
        <div class="filter-option">技术转让</div>
        <div class="filter-option">区域授权</div>
      </div>
    </div>
    
    <!-- 地区筛选 -->
    <div class="filter-section" id="region-section" style="display: none;">
      <div class="filter-section-title">招商地区</div>
      <div class="filter-options">
        <div class="filter-option active">全国招商</div>
        <div class="filter-option">一线城市</div>
        <div class="filter-option">二线城市</div>
        <div class="filter-option">三四线城市</div>
        <div class="filter-option">乡镇地区</div>
        <div class="filter-option">华北地区</div>
        <div class="filter-option">华东地区</div>
        <div class="filter-option">华南地区</div>
        <div class="filter-option">中西部</div>
      </div>
    </div>
    
    <!-- 排序筛选 -->
    <div class="filter-section" id="sort-section" style="display: none;">
      <div class="filter-section-title">排序方式</div>
      <div class="filter-options">
        <div class="filter-option active">推荐排序</div>
        <div class="filter-option">最新发布</div>
        <div class="filter-option">投资金额低到高</div>
        <div class="filter-option">投资金额高到低</div>
        <div class="filter-option">热门程度</div>
        <div class="filter-option">加盟成功率</div>
      </div>
    </div>
    
    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <button class="btn btn-light filter-action-btn" id="reset-filter">重置</button>
      <button class="btn btn-primary filter-action-btn" id="confirm-filter">确定</button>
    </div>
  </div>
  
  <!-- 快速筛选栏 -->
  <div class="quick-filter">
    <button class="quick-filter-item active">全部项目</button>
    <button class="quick-filter-item">低投入</button>
    <button class="quick-filter-item">高回报</button>
    <button class="quick-filter-item">新商机</button>
    <button class="quick-filter-item">免加盟费</button>
    <button class="quick-filter-item">品牌保障</button>
  </div>
  
  <!-- 筛选结果统计 -->
  <div class="filter-result">
    找到 <span class="result-count">36</span> 个招商加盟项目
  </div>
  
  <!-- 视图切换 -->
  <div class="view-controls">
    <button class="view-btn active" id="list-view-btn" title="列表视图">
      <i class="fa fa-list"></i>
    </button>
    <button class="view-btn" id="grid-view-btn" title="网格视图">
      <i class="fa fa-th-large"></i>
    </button>
  </div>
  
  <!-- 列表视图 -->
  <div class="franchise-list" id="list-view">
    <!-- 多图招商项目 -->
    <div class="franchise-item">
      <div class="franchise-images">
        <div class="franchise-image">
          <img src="https://picsum.photos/400/300?random=10" alt="咖啡品牌加盟">
        </div>
        <div class="franchise-image">
          <img src="https://picsum.photos/400/300?random=11" alt="咖啡品牌加盟">
        </div>
        <div class="franchise-image">
          <img src="https://picsum.photos/400/300?random=12" alt="咖啡品牌加盟">
          <div class="image-count">+2</div>
        </div>
      </div>
      <div class="franchise-content">
        <h3 class="franchise-title">精品咖啡连锁品牌招商加盟 全程扶持创业</h3>
        <div class="franchise-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 全国招商</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 3天前</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 1.2k人浏览</div>
          <div class="meta-item"><i class="fa fa-line-chart"></i> 成功率92%</div>
        </div>
        <div class="franchise-tags">
          <span class="franchise-tag tag-food">餐饮美食</span>
          <span class="franchise-tag">品牌连锁</span>
          <span class="franchise-tag">低风险</span>
        </div>
        <p class="franchise-desc">
          知名咖啡品牌诚招全国加盟商，提供从选址、装修、培训到运营的一站式扶持，总部全程指导，创业无忧。
        </p>
        <div class="franchise-actions">
          <div class="investment-info">
            投资金额：<span class="investment-amount">10-20万</span>
          </div>
          <button class="btn btn-primary action-btn">咨询详情</button>
        </div>
      </div>
    </div>
    
    <!-- 单图招商项目 -->
    <div class="franchise-item">
      <div class="franchise-images">
        <div class="franchise-image" style="flex: 100%">
          <img src="https://picsum.photos/800/400?random=13" alt="智能便利店加盟">
        </div>
      </div>
      <div class="franchise-content">
        <h3 class="franchise-title">智能无人便利店加盟 科技零售新选择</h3>
        <div class="franchise-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 一线/二线城市</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 1周前</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 2.5k人浏览</div>
          <div class="meta-item"><i class="fa fa-line-chart"></i> 成功率87%</div>
        </div>
        <div class="franchise-tags">
          <span class="franchise-tag tag-retail">零售超市</span>
          <span class="franchise-tag tag-tech">科技创新</span>
          <span class="franchise-tag">高回报</span>
        </div>
        <p class="franchise-desc">
          全新一代智能无人便利店，24小时营业，降低人力成本，总部提供全套智能系统和供应链支持，适合创业者。
        </p>
        <div class="franchise-actions">
          <div class="investment-info">
            投资金额：<span class="investment-amount">20-50万</span>
          </div>
          <button class="btn btn-primary action-btn">咨询详情</button>
        </div>
      </div>
    </div>
    
    <!-- 无图招商项目 -->
    <div class="franchise-item">
      <div class="no-image">
        <i class="fa fa-graduation-cap"></i>
        <div class="no-image-text">教育加盟项目</div>
      </div>
      <div class="franchise-content">
        <h3 class="franchise-title">少儿编程教育加盟 蓝海市场诚邀合作伙伴</h3>
        <div class="franchise-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 全国一二三线城市</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 2周前</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 3.1k人浏览</div>
          <div class="meta-item"><i class="fa fa-line-chart"></i> 成功率95%</div>
        </div>
        <div class="franchise-tags">
          <span class="franchise-tag">教育培训</span>
          <span class="franchise-tag">政策支持</span>
          <span class="franchise-tag">长期收益</span>
        </div>
        <p class="franchise-desc">
          专注于6-16岁青少儿编程教育，拥有自主研发课程体系和师资培训系统，市场需求大，加盟即享全方位支持。
        </p>
        <div class="franchise-actions">
          <div class="investment-info">
            投资金额：<span class="investment-amount">15-30万</span>
          </div>
          <button class="btn btn-primary action-btn">咨询详情</button>
        </div>
      </div>
    </div>
    
    <!-- 双图招商项目 -->
    <div class="franchise-item">
      <div class="franchise-images">
        <div class="franchise-image">
          <img src="https://picsum.photos/400/300?random=14" alt="健身工作室加盟">
        </div>
        <div class="franchise-image">
          <img src="https://picsum.photos/400/300?random=15" alt="健身工作室加盟">
        </div>
      </div>
      <div class="franchise-content">
        <h3 class="franchise-title">高端精品健身工作室加盟 健康产业新机遇</h3>
        <div class="franchise-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 城市商圈</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 1个月前</div>
          <div class="meta-item"><i class="fa fa-eye"></i> 980人浏览</div>
          <div class="meta-item"><i class="fa fa-line-chart"></i> 成功率85%</div>
        </div>
        <div class="franchise-tags">
          <span class="franchise-tag tag-service">健康服务</span>
          <span class="franchise-tag">高端品牌</span>
          <span class="franchise-tag">朝阳产业</span>
        </div>
        <p class="franchise-desc">
          连锁精品健身工作室，专注一对一私教服务，品牌口碑好，会员续卡率高，加盟提供全套运营管理方案。
        </p>
        <div class="franchise-actions">
          <div class="investment-info">
            投资金额：<span class="investment-amount">50-100万</span>
          </div>
          <button class="btn btn-primary action-btn">咨询详情</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 网格视图 -->
  <div class="franchise-grid" id="grid-view">
    <!-- 网格项1 - 多图 -->
    <div class="grid-item">
      <div class="grid-image">
        <img src="https://picsum.photos/400/300?random=10" alt="咖啡品牌加盟">
        <div class="image-count">+2</div>
      </div>
      <div class="grid-content">
        <h3 class="grid-title">精品咖啡连锁品牌招商加盟</h3>
        <div>
          <span class="grid-tag tag-food">餐饮</span>
          <span class="grid-tag">低风险</span>
        </div>
        <div class="grid-investment">10-20万</div>
        <div class="grid-meta"><i class="fa fa-map-marker"></i> 全国招商</div>
      </div>
    </div>
    
    <!-- 网格项2 - 单图 -->
    <div class="grid-item">
      <div class="grid-image">
        <img src="https://picsum.photos/400/300?random=13" alt="智能便利店加盟">
      </div>
      <div class="grid-content">
        <h3 class="grid-title">智能无人便利店加盟</h3>
        <div>
          <span class="grid-tag tag-retail">零售</span>
          <span class="grid-tag tag-tech">科技</span>
        </div>
        <div class="grid-investment">20-50万</div>
        <div class="grid-meta"><i class="fa fa-map-marker"></i> 一二线城市</div>
      </div>
    </div>
    
    <!-- 网格项3 - 无图 -->
    <div class="grid-item">
      <div class="grid-no-image">
        <i class="fa fa-graduation-cap"></i>
      </div>
      <div class="grid-content">
        <h3 class="grid-title">少儿编程教育加盟</h3>
        <div>
          <span class="grid-tag">教育</span>
          <span class="grid-tag">长期收益</span>
        </div>
        <div class="grid-investment">15-30万</div>
        <div class="grid-meta"><i class="fa fa-map-marker"></i> 全国</div>
      </div>
    </div>
    
    <!-- 网格项4 - 双图 -->
    <div class="grid-item">
      <div class="grid-image">
        <img src="https://picsum.photos/400/300?random=14" alt="健身工作室加盟">
        <div class="image-count">+1</div>
      </div>
      <div class="grid-content">
        <h3 class="grid-title">高端精品健身工作室加盟</h3>
        <div>
          <span class="grid-tag tag-service">服务</span>
          <span class="grid-tag">高端</span>
        </div>
        <div class="grid-investment">50-100万</div>
        <div class="grid-meta"><i class="fa fa-map-marker"></i> 城市商圈</div>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more">
    <button class="load-more-btn">
      <i class="fa fa-refresh"></i> 加载更多招商项目
    </button>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>招商</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-line-chart nav-icon"></i>
      <span>行情</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选面板控制
    const filterPanel = document.getElementById('filter-panel');
    const filterBtns = document.querySelectorAll('.filter-btn');
    const filterSections = {
      'industry-filter': 'industry-section',
      'investment-filter': 'investment-section',
      'region-filter': 'region-section',
      'sort-filter': 'sort-section'
    };
    
    // 显示/隐藏筛选面板
    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 切换按钮激活状态
        filterBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应筛选内容
        const sectionId = filterSections[this.id];
        Object.values(filterSections).forEach(id => {
          document.getElementById(id).style.display = 'none';
        });
        document.getElementById(sectionId).style.display = 'block';
        
        // 切换筛选面板显示状态
        if (filterPanel.style.display === 'block') {
          // 已显示，无需操作
        } else {
          filterPanel.style.display = 'block';
        }
      });
    });
    
    // 筛选选项切换
    const filterOptions = document.querySelectorAll('.filter-option');
    filterOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 同一组内只能选择一个
        const siblings = this.parentElement.querySelectorAll('.filter-option');
        siblings.forEach(sib => sib.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // 确认筛选
    document.getElementById('confirm-filter').addEventListener('click', function() {
      filterPanel.style.display = 'none';
      // 模拟筛选结果更新
      updateFilterResults();
    });
    
    // 重置筛选
    document.getElementById('reset-filter').addEventListener('click', function() {
      // 重置所有筛选选项
      filterOptions.forEach(option => {
        option.classList.remove('active');
        if (option.textContent.includes('全部') || option.textContent.includes('全国')) {
          option.classList.add('active');
        }
      });
    });
    
    // 快速筛选
    const quickFilterItems = document.querySelectorAll('.quick-filter-item');
    quickFilterItems.forEach(item => {
      item.addEventListener('click', function() {
        quickFilterItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        // 模拟筛选结果更新
        updateFilterResults();
      });
    });
    
    // 视图切换
    const listViewBtn = document.getElementById('list-view-btn');
    const gridViewBtn = document.getElementById('grid-view-btn');
    const listView = document.getElementById('list-view');
    const gridView = document.getElementById('grid-view');
    
    listViewBtn.addEventListener('click', function() {
      listViewBtn.classList.add('active');
      gridViewBtn.classList.remove('active');
      listView.style.display = 'block';
      gridView.style.display = 'none';
    });
    
    gridViewBtn.addEventListener('click', function() {
      gridViewBtn.classList.add('active');
      listViewBtn.classList.remove('active');
      gridView.style.display = 'grid';
      listView.style.display = 'none';
    });
    
    // 咨询按钮功能
    const actionButtons = document.querySelectorAll('.action-btn');
    actionButtons.forEach(button => {
      button.addEventListener('click', function() {
        const title = this.closest('.franchise-item').querySelector('.franchise-title').textContent;
        alert(`正在咨询：${title}\n我们将尽快与您联系`);
      });
    });
    
    // 网格项点击事件
    const gridItems = document.querySelectorAll('.grid-item');
    gridItems.forEach(item => {
      item.addEventListener('click', function() {
        const title = this.querySelector('.grid-title').textContent;
        alert(`查看详情：${title}`);
      });
    });
    
    // 加载更多功能
    document.querySelector('.load-more-btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-refresh"></i> 加载更多招商项目';
        alert('已加载全部招商项目');
      }, 1500);
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-input');
    searchInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        const searchText = this.value.trim();
        if (searchText) {
          // 模拟搜索结果更新
          updateFilterResults();
        }
      }
    });
    
    // 更新筛选结果（模拟）
    function updateFilterResults() {
      // 生成1-50之间的随机数模拟筛选结果
      const randomCount = Math.floor(Math.random() * 50) + 1;
      document.querySelector('.result-count').textContent = randomCount;
      
      // 显示筛选提示
      const activeFilters = [];
      
      // 获取快速筛选
      quickFilterItems.forEach(item => {
        if (item.classList.contains('active') && !item.textContent.includes('全部')) {
          activeFilters.push(item.textContent);
        }
      });
      
      // 获取高级筛选
      filterOptions.forEach(option => {
        if (option.classList.contains('active') && 
            !option.textContent.includes('全部') && 
            !option.textContent.includes('全国')) {
          activeFilters.push(option.textContent);
        }
      });
      
      if (activeFilters.length > 0) {
        alert(`已应用筛选条件：\n${activeFilters.join('、')}\n找到 ${randomCount} 个招商项目`);
      }
    }
  </script>
</body>
</html>
